<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>商品信息</span>
            </div>
            <div class="good-info">
                <div class="base-info">
                    <div class="b-img">
                        <img :src="baseImg">
                    </div>
                    <div class="b-text">
                        <h3>CF点卡充值</h3>
                        <small>库存: 113</small>
                    </div>
                </div>
                <p class="b-descrt">这里是产品简介空间设计卡萨丁看见100 点券/元，充值数量必须为100的倍数</p>
                <p class="b-prices">
                    该卡单价:
                    <span>$99.00</span>
                </p>
            </div>
        </el-card>
        <el-card class="box-card">
            <div class="buy-form">
                <el-form
                    :model="ruleForm2"
                    status-icon
                    size="medium"
                    ref="ruleForm2"
                    class="demo-ruleForm"
                >
                    <el-form-item label="购卡数量" prop="age">
                        <el-input-number
                            v-model="ruleForm2.num1"
                            :min="1"
                            :max="10"
                            label="描述文字"
                            controls-position="right"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="收卡邮箱" prop="age">
                        <el-input v-model="ruleForm2.email"></el-input>
                    </el-form-item>
                    <el-form-item label="设置查询密码" prop="age">
                        <el-input v-model="ruleForm2.pass"></el-input>
                    </el-form-item>
                    <div>
                        <el-button type="primary" size="big" @click="submitForm(ruleForm2)">立即购买</el-button>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "goodDetail",
    data() {
        return {
            baseImg: "http://localhost:8080/static/images/tt.jpg",
            ruleForm2: {
                num1: 1,
                pass: "",
                email: ""
            }
        };
    },
    methods: {
        submitForm(form) {
            console.log(form);
        },
        orderQuery() {
            this.$router.push({
                path: "/orderQuery"
            });
        }
    }
};
</script>

<style>
@media screen and (max-width: 768px) {
    .desktop-header {
        display: none !important;
    }
    .container {
        margin-left: 0;
    }
    .buy-form {
        padding: 10px 0;
        width: 100%;
    }
    .box-card {
        margin: 15px;
    }
    .base-info {
        padding: 10px 0;
    }
    .base-info .b-img {
        width: 60px;
        height: 60px;
    }
    .base-info .b-text h3 {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .buy-form .el-button{
        width: 100%;
    }
}
.box-card {
    margin: 25px;
}
</style>